<template>

  <a-modal
    class="call-container"
    title="申请调用"
    :visible="visible"
    @ok="handleCancel"
    @cancel="handleCancel"
  >
    <!-- <CommonForm ref="formRef" :formData="form" :formJson="formJson" /> -->
    <a-form-model
      ref="formRef"
      :labelCol="{span:4}"
      :wrapperCol="{span:20}"
      :model="form"
      :rules="rules"
    >
      <a-form-model-item label="分享时长" prop="subEndTime">
        <a-date-picker
          v-model="form.subEndTime"
          value-format="YYYY-MM-DD HH:mm:ss"
          format="YYYY-MM-DD HH:mm:ss"
          style="width: calc(100% - 98px);margin-right: 10px"
        />
        <a-button type="primary" :loading="confirmLoading" @click="handleOk">
          分享
        </a-button>
      </a-form-model-item>
      <a-form-model-item label="页面url" prop="url">
        <a-input ref="url" readonly :value="form.url" style="width: calc(100% - 98px);margin-right: 10px"></a-input>
        <a-button :disabled="!form.url || form.url === ''" @click="handleCopy" ref="button" type="primary" >复制地址</a-button>
      </a-form-model-item>
    </a-form-model>
    <div class="tip"><a-icon class="icon" type="info-circle" />申请调用成功的看板链接可供第三方使用。</div>
  </a-modal>

</template>

<script>
import { mapState } from "vuex"
import Clipboard from 'clipboard'
import CommonForm from "@/components/CommonForm"
import {
  applySubscribe,
} from '@/api/dashboard/board'

export default {
  components: {
    CommonForm
  },
  props: {
    id: {
      type: [Number, String],
      default: 0
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      visible: false,
      form: {
        subEndTime: '',
        name: this.data.name,
        url: ''
      },
      formJson: [
        {
          type: "input",
          label: "看板名称",
          fieldName: "name",
          initialValue: "",
          extraConfig: {
            className: "row",
            disabled: true
          }
        },
        {
          type: "date",
          label: "使用截止时间",
          fieldName: "subEndTime",
          initialValue: "",
          rules: { required: true, message: '使用截止时间不得为空' },
          extraConfig: {
            className: "row",
            format: "YYYY-MM-DD",
            valueFormat: "YYYY-MM-DD",
          }
        },
      ],
      confirmLoading: false,
      clipboard: null,
      rules: {
        subEndTime: { required: true, message: '使用截止时间不得为空' }
      }
    }
  },
  computed: {
    ...mapState('lowCode', {
      previewData: state => state.previewData
    })
  },
  // mounted(){

  // },
  beforeDestroy() {
    if (this.clipboard){
      this.clipboard.destroy()
    }
  },
  methods: {

    handleOk(){
      console.log(this.form.name)
      this.$refs.formRef.validate(value => {
        if (value){
          this.confirmLoading = true
          applySubscribe({id: this.id, subEndTime: encodeURIComponent(this.form.subEndTime)}) //  + ' 23:59:59'
          .then(res => {
            this.confirmLoading = false
            if (res.code === '000000') {
              this.$message.success("申请调用成功")
              this.$set(this.form, 'url', `${window.location.host}/quote/multidimensionalAnalysis/agileKanbanPreview?id=${this.id}&type=preview&code=${res.data}`)
              // this.ok()
            } else {
              this.$message.error(res.msg)
            }
          })
          .catch(err => {
            this.confirmLoading = false
            this.$message.error(err.response.data.message)
          })
        }
      })
    },
    ok() {
      this.visible = false
      this.form = {
        subEndTime: ''
      }
      this.$emit('ok')
    },
    show() {
      this.form.name = this.data.name
      this.visible = true
    },
    handleCancel() {
      this.ok()
    },
    handleCopy() {
      const input = this.$refs.url.$el
      input.select()
      document.execCommand("Copy")
      this.$message.success('复制成功')
      // const dom =  this.$refs.button.$el
      // this.clipboard = new Clipboard(dom, {
      //   text: () => {
      //     return this.form.url
      //   }
      // })

      // console.log(dom, this.clipboard)
      // this.clipboard.on('success', ()=> {
      //   this.$message.success('复制成功')
      //   this.clipboard.destroy()
      // })
      // this.clipboard.on('error', (error)=> {
      //   this.$message.error('当前浏览去不支持自动复制')
      //   console.log(error)
      //   this.clipboard.destroy()
      // })
    }

  },

}
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
